<template>
	<view class="content">

		<!-- 首页轮播 -->
		<view class="swiper-action-box">
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" circular="true">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 宫格导航 -->
		<view class="nav-box">
			<uni-grid style="border-radius: 20rpx;" :column="4" :highlight="true" @change="change" :showBorder="false">
				<uni-grid-item v-for="(item, index) in navList" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="nav-picture" :src="item.url" mode="aspectFit"></image>
						<text class="text">{{item.label}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<!-- 公告提示 -->
		<view class="notice-box">
			<uni-notice-bar scrollable showIcon text="这是一则通告"></uni-notice-bar>
		</view>
		
		<!-- 选项卡列表数据 -->
		<view class="options-List">
			<uni-segmented-control :current="optionsCurrent" :values="items" @clickItem="onClickItem" styleType="text"/>				
			<view class="">
				<view v-if="optionsCurrent === 0">
					<uni-list>
						<uni-list-item 
							v-for="(item,index) in optionsList"
							:avatar-circle="true" 
							:title="item.title" 
							:thumb="item.thumb" 
							:note="item.note" 
							:rightText="item.rightText"
							 clickable  
							@click="listItemClick"
							:key="index">
						</uni-list-item>
					</uni-list>
				</view>
				<view v-if="optionsCurrent === 1">
					<uni-list>
						<uni-list-item 
							v-for="(item,index) in optionsList"
							:avatar-circle="true" 
							:title="item.title" 
							:thumb="item.thumb" 
							:note="item.note" 
							:rightText="item.rightText" 
							:key="index">
						</uni-list-item>
					</uni-list>
				</view>
				<view v-if="optionsCurrent === 2">
					<uni-list>
						<uni-list-item 
							v-for="(item,index) in optionsList"
							:avatar-circle="true" 
							:title="item.title" 
							:thumb="item.thumb" 
							:note="item.note" 
							:rightText="item.rightText" 
							:key="index">
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{ // 轮播图列表
						colorClass: 'uni-bg-red',
						url: 'https://ts1.cn.mm.bing.net/th/id/R-C.63d5b5b56c13a332e8e3166d5ad25eb5?rik=X3APh75B3fN0Kg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1307%2f10%2fc2%2f23151595_1373424485109.jpg&ehk=lr%2fmn25zYXJ1EVHvD%2ft1B4lyNY9rm8u6ws37L%2bMH5NQ%3d&risl=&pid=ImgRaw&r=0',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://pic2.zhimg.com/v2-2b0c25d34d20099035b7ef3bbc07f32f_r.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://sc.68design.net/photofiles/202104/RagtcwUBda.jpg',
						content: '内容 C'
					}
				],
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否采用衔接滑动，即播放到末尾后重新回到开头
				interval: 2000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				navList:[ // 宫格导航列表
					{
						url:"/static/images/tabbar/home.png",
						label:"导航1"
					},
					{
						url:"/static/images/tabbar/mine.png",
						label:"导航2"
					},
					{
						url:"/static/images/tabbar/work.png",
						label:"导航3"
					},
					{
						url:"/static/images/phone.jpg",
						label:"导航4"
					}
				],
				optionsCurrent:0, // 选项卡选中
				items: ['选项卡1', '选项卡2', '选项卡3'],
				optionsList:[
					{
						title:"列表项1",
						thumb:"https://ts1.cn.mm.bing.net/th/id/R-C.3ad2f0e5a40aa6b94348bf333e405bf6?rik=CyPhNcMVE29c7g&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f011b97586354e5a801219c77a283b0.jpg%401280w_1l_2o_100sh.jpg&ehk=QY28Cn7THY6d8ahW7puB8c93Dr2rl5P9aAU5elVtymo%3d&risl=&pid=ImgRaw&r=0",
						note:"列表项内容",
						rightText:"2020-02-02 20:20"
					},{
						title:"列表项2",
						thumb:"https://img.zcool.cn/community/01b1d5563eca0a32f87512f61f3d69.jpg@1280w_1l_2o_100sh.jpg",
						note:"列表项内容",
						rightText:"2020-02-02 20:20"
					},{
						title:"列表项3",
						thumb:"https://pic3.zhimg.com/v2-1714485227e3f79159c72d213eda42d5_r.jpg?source=1940ef5c",
						note:"列表项内容",
						rightText:"2020-02-02 20:20"
					},
				]
			}
		},
		onLoad: function() {},
		methods: {
			change(e) {
				uni.showToast({
					title: `功能暂未开放`,
					icon: 'none'
				})
			},
			onClickItem(e){
				if (this.optionsCurrent !== e.currentIndex) {
					this.optionsCurrent = e.currentIndex
				}
			},
			listItemClick(){
				uni.showToast({
					title: `页面暂未开放`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.swiper-action-box {
		width: 100%;
	}

	.swiper-item {
		display: block;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		height: 400rpx;
		line-height: 400rpx;
	}
	
	.nav-box{
		margin-top: 30rpx;
		width: 90%;
		padding: 5rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		box-shadow:0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
		
		.grid-item-box{
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction:column;
			
			.nav-picture{
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}
		}
	}
	
	.notice-box{
		width: 100%;
		margin-top: 30rpx;
	}
	
	.options-List{
		width: 95%;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	
</style>